<style>
    .layui-form-select dl { max-height:200px; }
</style>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body" style="padding-top: 40px;">
            <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
                <div carousel-item>
                    <div>
                        <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                            <div class="layui-form-item">
                                <label class="layui-form-label">账号:</label>
                                <div class="layui-input-block">
                                    <input type="text" name="account" placeholder="请填写平台登录账号" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" onchange="validateUsername()" autocomplete="off" value="" class="layui-input" lay-verify="required" />

                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">昵称:</label>
                                <div class="layui-input-block">
                                    <input type="text" name="nickname" placeholder="请填写账户昵称" autocomplete="off" value="" class="layui-input" lay-verify="required" />
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">用户角色:</label>
                                <div class="layui-input-block">
                                    <label>
                                        <select lay-verify="required" name="role" lay-search>
                                            <option th:each="role:${roles}" th:value="${role.roleCode}" th:text="${role.roleName}"></option>
                                        </select>
                                    </label>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="formStep">
                                        &emsp;下一步&emsp;
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div>
                        <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">

                            <span id="invert">

                            </span>
                            <div class="layui-form-item">
                                <label class="layui-form-label">密码:</label>
                                <div class="layui-input-block">
                                    <input type="password" name="password" placeholder="请填写密码" autocomplete="tel" class="layui-input" lay-verify="required" />

                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">确认密码:</label>
                                <div class="layui-input-block">
                                    <input type="password" name="checkPassword" placeholder="请再次填写密码"  onchange="validate()" autocomplete="tel" class="layui-input" lay-verify="required" />
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
                                    <button class="layui-btn" lay-submit lay-filter="formStep2">
                                        &emsp;确认注册&emsp;
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div>
                        <div style="text-align: center;margin-top: 90px;">
                            <i class="layui-icon layui-circle"
                               style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;">&#xe605;</i>
                            <div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
                                注册成功
                            </div>
                           <!-- <div style="font-size: 14px;color: #666;margin-top: 20px;">欢迎加入</div>-->
                        </div>
                        <div style="text-align: center;margin-top: 50px;">
                            <button class="layui-btn next">再次注册</button>
                            <button class="layui-btn layui-btn-primary" id="manager">账户管理</button>
                        </div>
                    </div>
                </div>
            </div>
            <hr>
            <div style="color: #666;margin-top: 30px;margin-bottom: 40px;padding-left: 30px;">
                <h3>说明</h3><br>
                <h4></h4>
                <p>，。</p>
                <br><h4>平台管理员</h4>
                <p>负责整个平台的账户管理</p>
            </div>
        </div>
    </div>
</div>
<script  th:inline="javascript">
    /*<![CDATA[*/

    layui.use(['form', 'step'], function () {
        let  form = layui.form
            , step = layui.step;
        const roles = [[${roles}]];
        const formParams = {};
        step.render({
            elem: '#stepForm',
            filter: 'stepForm',
            width: '100%', //设置容器宽度
            stepWidth: '750px',
            height: '500px',
            stepItems: [{
                title: '填写账户'
            }, {
                title: '确认账户信息'
            }, {
                title: '完成'
            }]
        });


        /*如果你的HTML是动态生成的，自动渲染就会失效
        因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();*/
        form.render();
        form.render('select'); //刷新select选择框渲染,避免动态加载form失败

        /* 下一步 */
        form.on('submit(formStep)', function (data) {
            Object.assign(formParams, data.field);
            let rolename;
            for (const role of roles) {
                if(data.field.role === role.roleCode)rolename=role.roleName;
            }


            let html  =`<div class="layui-form-item">
                                <label class="layui-form-label">账号:</label>
                                <div class="layui-input-block">
                                    <div class="layui-form-mid layui-word-aux">
                                     <span style="font-size: 18px;color: #333;">${data.field.account}</span>
                                    </div>
                                </div>
                            </div>
                        <div class="layui-form-item">
                                <label class="layui-form-label">昵称:</label>
                                <div class="layui-input-block">
                                    <div class="layui-form-mid layui-word-aux">
                                     <span style="font-size: 18px;color: #333;">${data.field.nickname}</span>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">用户角色:</label>
                                <div class="layui-input-block">
                                    <div class="layui-form-mid layui-word-aux">
                                     <span style="font-size: 18px;color: #333;">${rolename}</span>
                                    </div>
                                </div>
                            </div>
                         `;

            $("#invert").html(html);
            step.next('#stepForm');
            return false;
        });

        form.on('submit(formStep2)', function (data) {
            Object.assign(formParams, data.field);
            $.ajax({
                type: 'POST',
                contentType: 'application/json;charset=UTF-8',
                url: "/admin/addUser",
                data: JSON.stringify(formParams),
                success: function(result){
                    if(result.code === 1){
                        step.next('#stepForm');
                    }else {
                        layer.msg(result.message, {icon: 2,time: 1200});
                    }
                },
                error : function(e){
                    layer.msg('网络错误', {icon: 2});
                }
            });

            return false;
        });

        /* 上一步 */
        $('.pre').click(function () {
            step.pre('#stepForm');
        });

        $('.next').click(function () {
            step.next('#stepForm');
        });

    });

    function  validate(){
        let checkPassword = $("input[name = 'checkPassword']");
        let password = $("input[name = 'password']");

        if(checkPassword.val()!==password.val()){
           /* alert("erroe");*/
            checkPassword.val("");
            layer.msg('两次密码不一致', {icon: 5,anim: 6,});
        }
    }

    function  validateUsername(){
        let username = $("input[name = 'username']");
        $.get("/admin/userInfo",{username:username.val()},function(data){
           if(data.code === 0){
               username.val("");
               layer.msg(data.message, {icon: 5,anim: 6,});
           }
        });
    }

    $("#manager").click(function() {
        window.location.href="/index";
    });
    /*]]>*/
</script>

